Vue el

2024-07-14 23:31| 来源: 网络整理| 查看: 265

element-ui upload组件上传文件类型及文件大小限制_el-upload accept不识别大写后缀-CSDN博客 vue+element+upload文件上传前校验类型和大小、抛出异常或错误、正则表达式、转小写、截取字符串、throw、RegExp、toLowerCase、lastIndexOf、includes_vue3上传文件校验-CSDN博客

file.size:以字节计的文件大小。

accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.ppt" 选取文件只能上传xls/xlsx文件，且不超过一个

如果限制只能上传1个文件，可以把limit设置为1就行，也可以在on-change方法中设置，需要显示几个根据需求来设置

onChange(file, fileList) { // 通过这个判断截取长度 if (fileList.length > 1) { fileList.splice(0, 1) } },

限制文件类型，通过上传之前的钩子:before-upload="beforeUpload" 限制文件大小，就是里面注释的部分

beforeUpload(file) { const fileTypes1 = file.name.substring(file.name.lastIndexOf(".") + 1); const suffix5 = fileTypes1 === "xls"; const suffix6 = fileTypes1 === "xlsx"; const suffix7 = fileTypes1 === "jpeg"; const suffix8 = fileTypes1 === "jpg"; const suffix9 = fileTypes1 === "png"; .jpeg,.jpg,.png.xls,.xlsx // const isLt2M = file.size / 1024 / 1024 < 10 if(!suffix5 && !suffix6 && !suffix7 && !suffix8 && !suffix9) { this.$message({ message: '上传文件只能是 .jpeg,.jpg,.png.xls,.xlsx格式!', type: 'warning' }); } // 也可以在这里增加文件大小限制 // if(!isLt2M) { // this.$message({ // message: '上传文件大小不能超过 10MB!', // type: 'warning' // }); // } // return (suffix5 || suffix6) && isLt2M return false },

【本文地址】

公司简介

联系我们